import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Layout, Menu, Breadcrumb, Row, Col, Button, Tabs, Space, Dropdown } from 'antd';
import { Link, useHistory } from 'react-router-dom'
import { Typography } from 'antd'
import MockExam from '../exam/mockExam'
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import LoginDialog from '../userlogin/loginDialog'
import ScoreCenter from './scoreCenter/index'
export default () => {
    const { TabPane } = Tabs;
    const { Title } = Typography;
    const { Header, Footer, Sider, Content } = Layout;
    const [loginDialogVisible, setLoginDialogVisible] = useState(false)
    const history = useHistory();
    const StateButton = () => {
        const [stateRepeat, setSatteRepeat] = useState(0)
        const trueName = localStorage.getItem('trueName') || sessionStorage.getItem('trueName')

        //下拉选项
        const menu = (
            <Menu>
                <Menu.Item>
                    <Button type="text" onClick={() => {
                        // logout()
                        sessionStorage.clear();
                        localStorage.clear();
                        setSatteRepeat(stateRepeat + 1)
                    }}>注销</Button>
                </Menu.Item>
                <Menu.Item>
                    <Button

                        type="text"

                    ><Link to='/selfCenter'>个人中心</Link></Button>
                </Menu.Item>
            </Menu>
        );

        if (trueName == null || true == undefined) {
            return (
                <>
                    <Button
                        type="link"
                        onClick={() => { setLoginDialogVisible(true) }}
                        danger>登录
                    </Button>
                    <Button
                        type="link"
                        danger
                        onClick={() => {
                            history.push('/user')
                        }}
                    >
                        首页
                    </Button>
                </>
            )
        }
        else {
            return (
                <>
                    <Dropdown overlay={menu} placement="bottomLeft">
                        <Button type="link">{trueName}</Button>
                    </Dropdown>
                    <Button
                        type="link"
                        danger
                        onClick={() => {
                            history.push('/user')
                        }}
                    >
                        首页
                    </Button>
                </>
            )
        }
    }

    return (
        <>
            <Layout>
                <Header style={{ background: '#bcc7c7' }}>
                    <Space>
                        <Title level={4}>驾驶理论考试用户中心</Title>

                        <Space
                            size={900}
                        >
                            <div></div>
                            <StateButton />
                        </Space>
                    </Space>
                </Header>
                <Layout>
                    <Content>
                        <Tabs
                            size='large'
                            tabPosition='left'
                        >
                            <TabPane tab="成绩中心" key="1">
                                <ScoreCenter />
                            </TabPane> 
                        </Tabs>
                    </Content>
                </Layout>

            </Layout>

            <LoginDialog
                visible={loginDialogVisible}
                setVisible={setLoginDialogVisible}
            />
        </>
    )
}


